import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:meal/constant/antd_icons.dart';
import 'package:meal/constant/fonts.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 更新交易密码
///
class UpdatePassword extends StatefulWidget {
  const UpdatePassword({Key? key}) : super(key: key);

  @override
  State<UpdatePassword> createState() => _UpdatePasswordState();
}

class _UpdatePasswordState extends State<UpdatePassword> {
  String password = '';
  int len = 6;
  List<FocusNode> focusNodes = [];
  List<TextEditingController> texts = [];

  @override
  void initState() {
    for (var i = 0; i < len; i++) {
      focusNodes.add(FocusNode());
      texts.add(TextEditingController(text: ''));
    }
    super.initState();
  }

  void focusNodeIndex([bool show = true]) {
    int len = password.length;
    int index = 0;
    if (len > 5) {
      index = 5;
    } else if (len > 0) {
      index = len;
    }
    FocusScope.of(context).requestFocus(focusNodes[index]);
    if (show) {
      openDialog();
    }
  }

  void clearPassword() {
    password = '';
    for (var i = 0; i < len; i++) {
      texts[i].text = '';
      FocusScope.of(context).requestFocus(focusNodes[0]);
    }
  }

  void setPassword(String char) {
    password = password + char;
    var strs = password.split('');
    for (var i = 0; i < strs.length; i++) {
      texts[i].text = '*';
    }
    focusNodeIndex(false);
    if (password.length == len) {
      Navigator.pop(context);
    }
    setState(() {});
  }

  void deletePassword() {
    if (password.isEmpty) {
      return;
    }
    password = password.substring(0, password.length - 1);
    for (var i = password.length; i < len; i++) {
      texts[i].text = '';
    }
    focusNodeIndex(false);
    setState(() {});
  }

  BorderSide get borderSide {
    return BorderSide(color: ColorsUtils.rgba(153, 153, 153, 0.4));
  }

  TextStyle get textStyle {
    return StylesUtils.customTextStyle(color: ColorsUtils.color333, fontSize: Sizes.default20);
  }

  void openDialog() {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: 210,
            padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                Container(
                  height: 50,
                  decoration: BoxDecoration(border: Border(bottom: borderSide)),
                  child: Row(
                    children: [
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('1');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              child: Text(
                                '1',
                                style: textStyle,
                              ),
                            ),
                          )),
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('2');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              decoration:
                              BoxDecoration(border: Border(left: borderSide, right: borderSide)),
                              child: Text('2', style: textStyle),
                            ),
                          )),
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('3');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              child: Text('3', style: textStyle),
                            ),
                          )),
                    ],
                  ),
                ),
                Container(
                  height: 50,
                  decoration: BoxDecoration(border: Border(bottom: borderSide)),
                  child: Row(
                    children: [
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('4');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              child: Text(
                                '4',
                                style: textStyle,
                              ),
                            ),
                          )),
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('5');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              decoration:
                              BoxDecoration(border: Border(left: borderSide, right: borderSide)),
                              child: Text('5', style: textStyle),
                            ),
                          )),
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('6');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              child: Text('6', style: textStyle),
                            ),
                          )),
                    ],
                  ),
                ),
                Container(
                  height: 50,
                  decoration: BoxDecoration(border: Border(bottom: borderSide)),
                  child: Row(
                    children: [
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('7');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              child: Text(
                                '7',
                                style: textStyle,
                              ),
                            ),
                          )),
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('8');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              decoration:
                              BoxDecoration(border: Border(left: borderSide, right: borderSide)),
                              child: Text('8', style: textStyle),
                            ),
                          )),
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('9');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              child: Text('9', style: textStyle),
                            ),
                          )),
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Expanded(
                          child: Container(
                            alignment: Alignment.center,
                            child: Text(
                              '',
                              style: textStyle,
                            ),
                          )),
                      Expanded(
                          child: InkWell(
                            onTap: () {
                              setPassword('0');
                            },
                            child: Container(
                              alignment: Alignment.center,
                              decoration:
                              BoxDecoration(border: Border(left: borderSide, right: borderSide)),
                              child: Text('0', style: textStyle),
                            ),
                          )),
                      Expanded(
                          child: Container(
                              alignment: Alignment.center,
                              child: IconButton(
                                onPressed: deletePassword,
                                icon: Icon(AntdIcons.deleteFill,
                                    color:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.color333),
                                    size: Sizes.default30),
                              ))),
                    ],
                  ),
                ),
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BrnAppBar(
        backgroundColor: ColorsUtils.rgba(255, 110, 83, 1),
        title: Text('重新修改交易密码', style: StylesUtils.customTextStyle(fontSize: Sizes.default18)),
        elevation: 0,
        titleAlignment: Alignment.center,
        themeData: BrnAppBarConfig(
          iconSize: Sizes.default20,
          leadIconBuilder: () {
            return ToolsUtils.getAssetImageIcon('back.png');
          },
          leftAndRightPadding: Sizes.default10,
          titlePadding: EdgeInsets.zero,
          actionsStyle: BrnTextStyle(
            color: Colors.white,
            fontSize: Sizes.default16,
            fontWeight: Fonts.w4
          ),
        ),
        actions: BrnTextAction(
          '确定',
          iconPressed: () {

          },
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          decoration: const BoxDecoration(color: Colors.white),
          margin: const EdgeInsets.only(bottom: Sizes.default30),
          padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
          child: Column(
            children: [
              Container(
                margin: const EdgeInsets.only(top: Sizes.default20),
                alignment: Alignment.centerLeft,
                child: Text('修改交易密码',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color363, fontSize: Sizes.default30)),
              ),
              Container(
                alignment: Alignment.centerLeft,
                child: Text('请输入旧交易密码，已验证身份',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color999, fontSize: Sizes.default13)),
              ),
              Container(
                margin: const EdgeInsets.only(top: Sizes.default20, bottom: Sizes.default30),
                alignment: Alignment.center,
                child: Wrap(
                    spacing: Sizes.default5,
                    children: focusNodes.asMap().keys.map((int index) {
                      return Container(
                        constraints: const BoxConstraints.expand(
                            width: Sizes.default44, height: Sizes.default44),
                        decoration:
                        BoxDecoration(color: ColorsUtils.parseColorFromHexString('#F5F5F5')),
                        child: TextField(
                          textAlign: TextAlign.center,
                          controller: texts[index],
                          focusNode: focusNodes[index],
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color999, fontSize: Sizes.default18),
                          decoration: InputDecoration(
                              border: const OutlineInputBorder(
                                borderSide: BorderSide.none,
                              ),
                              isCollapsed: true,
                              filled: true,
                              fillColor: ColorsUtils.parseColorFromHexString('#F5F5F5'),
                              contentPadding: const EdgeInsets.symmetric(
                                  horizontal: Sizes.default10, vertical: Sizes.default10),
                              constraints: const BoxConstraints(
                                  maxHeight: Sizes.default44, maxWidth: Sizes.default44)),
                          keyboardType: TextInputType.visiblePassword,
                          obscuringCharacter: '*',
                          readOnly: true,
                          showCursor: true,
                          onTap: focusNodeIndex,
                        ),
                      );
                    }).toList()),
              )
            ],
          ),
        ),
      ),
    );
  }
}
